React Native开发入门
目录：一、前言二、什么是React Native三、开发环境搭建四、预备知识五、最简单的React Native小程序六、总结七、参考资料 一、前言虽然只是简单的了解了一下React的皮毛，但是对React Native的学习就轻松了好多。所以在学习React Native之前，最好还是先学习一下React。因为我学习的iOS开发，对iOS更...
2024-01-10
React-Native -课后练习
import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native';class meituan extends Component { render() { return ( <View> <View style={[styles.view_row,styles.height_160]}> ...
2024-01-10
React-Native性能优化点
shouldComponentUpdate确保组件在渲染之后不需要再更新的，即静态组件，尽量在其中增加shouldComponentUpdate方法,防止二次消耗所产生的性能消耗shouldComponentUpdate() { //完全静态的组件,无需更新 return false;}keykey是react的一个特殊的属性，它是给React自己用的。如果我们动态地创建 React 元素，而且 React ...
2024-01-10
React Native填坑之旅--动画
动画是提高用户体验不可缺少的一个元素。恰如其分的动画可以让用户更明确的感知当前的操作是什么。无疑在使用React Native开发应用的时候也需要动画。这就需要知道RN都给我们提供了那些动画，和每个动画可以处理的功能有哪些。填坑材料Animated动画API提供了一些现成的组件：Animated.View，Animated.T...
2024-01-10
React Native 之 数据持久化
前言因为 实战项目系列 涉及到数据持久化，这边就来补充一下。如本文有错或理解偏差欢迎联系我，会尽快改正更新！如有什么问题，也可直接通过邮箱 277511806@qq.com 联系我。demo链接: https://pan.baidu.com/s/1hsspiio 密码: dk3h数据持久化数据持久化一直都是软件开发中重要的一个环节，几乎所有...
2024-01-10
React Native入门遇到的一些问题
本文示例参考自《React Native第一课》 React Native官方文档中文版（含最新Android内容） 这里只大概记录下我的操作步骤和遇到的问题，一定要牢记下面这条： 如果你在Mac下遇到提示写入权限时，记得在命令前加上sudo 安装开发所需要的环境，参考这里>> 我所遇到的几个问题： 1) 安装brew curl -LsSf http://gith...
2024-01-10
React Native滑出面板和滚动视图
我正在开发与本机反应的应用程序。我有一个UI元素，它与iOS中的Maps相似，在其中您可以从底部滑动面板，在面板内部有一个可滚动的列表。对于滑出式面板，我使用的组件称为rn-sliding-up-panel。它有几个道具可以作为事件监听器。例如<SlidingUpPanel allowDragging={/*Boolean*/} onDragStart={()=>{} /*When it is about...
2024-01-10![[RN] <span style='color:red;'>React Native</span> 调试技巧](/wp-content/uploads/thumbs/534118_thumbnail.jpg)
[RN] React Native 调试技巧
React Native 调试技巧一、 安卓模拟器调出Dev Setting 命令adb shell input keyevent 82二、图片不出来时，先运行此命令，再重新 runreact-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/s...
2024-01-10
React Native 常用的 15 个库
本篇 react native 库列表不是从网上随便找的， 这些是我在我的应用中亲自使用的库。 这些库功能可能跟其它库也有，但经过大量研究并在我的程序中尝试后，我选择了这些库。15. React Native Animatable这个库非常适合快速地向 react Native 应用程序添加简单的动画和转换。这个库有两种使用方式:声明式...
2024-01-10
React Native与OC之间通信那些事
React Native用IOS自带的JavaScriptCore作为JS的解析引擎，普通的JS-OC通信就是React Native在OC定义一个模块方法，JS可以直接调用这个模块方法并还可以无缝衔接回调。http://www.jianshu.com/p/c95d62190781作者：IMWeb-朱灵子http://imweb.io/topic/5812ab7be2017a3d1878b508具体的接口调用实现方法如下所示：将OC注册进来的模块...
2024-01-10
React-Native集成dva.js
dvajs作为一个基于redux的状态管理框架，在react中的表现还是很不错的，如果我们想要在react-native应用中使用dvajs该怎么做呢？首先安装dva-core和react-redux：npm i -S dva-core react-reduxdva-core是dvajs的核心部分，能够很好的和其他react-native组件在一起工作。dva-core和dva在提供的方法上有一些区别，不过在使用思...
2024-01-10![[<span style='color:red;'>React Native</span>] 解析JSON文件](/wp-content/uploads/thumbs/535012_thumbnail.jpg)
[React Native] 解析JSON文件
在编写代码时,开发者有时需要存储一些比较多，在应用程序运行时不需要更改的数据。文件大不便于写在代码中，可以把这些数据存储到JSON文件中。优点非常明显： 1. 数据存放在单独的文件中，代码精简有条理。 2. JSON数据格式便于阅读，修改。给大家演示下，在项目目录下建立一个名为data的目...
2024-01-10![[<span style='color:red;'>React Native</span>]Promise机制](/wp-content/uploads/thumbs/534109_thumbnail.jpg)
[React Native]Promise机制
React Native中经常会看到Promise机制。 Promise机制代表着在JavaScript程序中下一个伟大的范式。可以把一些复杂的代码轻松撸成一个串，和Android中的rxjava非常像。Promise代表一个任务结果，这个任务有可能完成，有可能没有完成。Promise模式唯一需要的一个接口是调用then方法，用来注册当Promise完成或者失败...
2024-01-10
React Native 项目iOS真机调试红屏
错误信息：反应本地版本不匹配。javascript版本xx.xx.xx本地版本xx.xx.xx原因：开启的反应原生服务与你当前运行的反应原生项目不一致造成的。解决办法：打开终端，将路径切到RN项目下，并执行npm start待服务开启后，在iphone设备端，摇晃会reload js即可。侵权请联系我删除。...
2024-01-10![[RN] <span style='color:red;'>React Native</span> 实现图片预览](/wp-content/uploads/thumbs/533940_thumbnail.jpg)
[RN] React Native 实现图片预览
[RN] React Native 实现图片预览效果预览：代码如下：'use strict';import React, {Component} from 'react';import {Image, StyleSheet, Text, View, ViewPagerAndroid, Dimensions} from 'react-native';const {width, height} = Dimensions.get("window");//图片地址const PAGE_IMAGES = [ '...
2024-01-10
【React】如何调试React Native？
根据rn的教程中，我把远程的json换成本地的json，但仍然报错，没办法得知到底哪里不对了，目前只知道alert方法。。var REQUEST_URL = 'http://172.20.10.2:8000/rnDemo/movies.json';....componentDidMount: function() {this.fetchData();},fetchData: function() {fetch(REQUEST_URL).then((response) => response.json())....
2024-01-10
React-Native入门指导之iOS篇
React-Native 入门指导系列教程目录一、准备工作 (已完成)二、项目介绍与调试三、CSS样式与Flex布局四、常用UI控件的使用五、JSX在React-Native中的应用六、事件与数据调用七、自定义组件八、动手写实例九、发布与真机调试 写在前面1. 什么是React-Native？ React-Native是：Facebook 在2015年初Re...
2024-01-10
现有iOS项目集成React Native过程记录
在搭建配置了RN的开发环境，然后，本文记录在现有iOS项目集成React Native的过程，官方推荐使用Cocoapods，项目一开始也是使用它，只是有时安装库很慢，还不如复制粘贴库来的快，就删除它了，这里就使用手动集成的方式吧。 1. 新增React Native文件路径和json说明文件，进入项目根目录(*.xcodeproj文...
2024-01-10
在Mac系统下搭建React Native开发环境
这里记录一下在Mac系统下搭建React Native开发环境的过程： 1. 安装HomeBrew:1/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 安装完后如下所示： \ 可使用命令：”brew -v“查看其版本。 2. 安装Node.JS: brew install node，也可以在node.js官网下载pkg安装包进...
2024-01-10
React Native 开发之 IDE 选型和配置
React Native 发布一年多了，有不少公司已经在线上产品中或小范围试水，或大范围应用，很多公司或开发者都在为 React Native 的生态系统作出自己的贡献。React Native 的开发基本上是 Javascript ＋ 系统原生开发语言（Java，Objective-C，Swift），原生语言的开发所用的 IDE 没有多余的选择，Android 平台只能使用 An...
2024-01-10
React Native 仿 ofo 共享单车 App
本文为 Marno 原创，转载必须保留出处！公众号【 aMarno 】，关注后回复 RN 加入交流群React Native 优秀开源项目大全：http://www.marno.cnhttp://www.jianshu.com/p/6d7bac35af46一、前言并没有实现 ofo 所有功能，只完成了主要的界面和逻辑，感觉其中也就【地图】和【扫码】两个比较核心的功能还需要花点时...
2024-01-10
React-native真机调试遇到的问题
React-native真机调试遇到的问题打开官网，有关于如何真机调试的文档：https://reactnative.cn/docs/running-on-device/第一步准备工具： 1、iPhone手机 2、usb数据线 3、Apple ID连上数据线之后，打开Xcode，设置：如果这是第一次在iOS设备上运行app，需要注册开发设备。从Xcode菜单栏打开Product菜单，然后...
2024-01-10React Native向特定的WhatsApp发送消息
我正在尝试从本机应用程序向WhatsApp联系人发送文本消息，我发现我可以通过链接来做到这一点Linking.openURL('whatsapp://send?text=hello');上面的代码仅打开whats应用程序，我需要打开一个具有特定号码的聊天记录，是否有我必须像文本一样发送的参数？回答：您可以使用它向特定号码发送消息：Linking.openUR...
2024-01-10
小米手机调试React Native,怎样进入开发者菜单
调试react-native应用时，真机上要通过按下菜单按钮或者摇动手机来开启Developer Menu。我在小米手机上尝试无效，有以下两个权限需要打开：进入设置—更多应用—找到要调试的应用1、权限管理—显示悬浮窗2、通知管理—悬浮通知（打开）打开这两项设置，在调试应用界面时，再次摇动手机就出...
2024-01-10
React Native开发之——组件TextInput
前言React Native中用于输入文本的组件是TextInput，类似于Android中的EditText，TextInput也是继承自 View,所以 View 的属性 TextInput 也能使用，一些样式类的属性可以参照 View 的相关属性。本文主要讲述：autoCapitalize属性autoCorrect属性autoFocus属性keyboardType属性（设置软键盘类型）returnKeyType属性（设置返回键类...
2024-01-10
